<template>
  <!-- 商品列表 -->
  <div>
    <div class="box">
      <!-- 点击选择规则弹出 -->
      <van-popup v-model="show">
        <div class="specification">
          <h4>
            {{
              footList[index] &&
              footList[index].foods[i] &&
              footList[index].foods[i].name
            }}
          </h4>
          <p>
            {{
              footList[index] &&
              footList[index].foods[i] &&
              footList[index].foods[i].specifications[0] &&
              footList[index].foods[i].specifications[0].name
            }}
          </p>
          <span
            v-for="(val, i) in footList[index] &&
            footList[index].foods[i].specfoods"
            :key="i"
            @click="indexgg = i"
            ><van-button plain :type="indexgg == i ? 'info' : 'default'">{{
              val.specs_name
            }}</van-button></span
          >
          <h2>
            <span
              >¥{{
                footList[index] &&
                footList[index].foods[i].specfoods[indexgg].price
              }}</span
            ><span @click="addgoods"
              ><van-button type="info">加入购物车</van-button></span
            >
          </h2>
        </div>
      </van-popup>
      <!-- 左边列表    -->
      <div class="left">
        <ul>
          <li
            :class="{ blue: index == i }"
            v-for="(val, i) in footList"
            :key="i"
            @click="index = i"
          >
            <p>
              <van-badge
                :content="
                  buyCart[shopid] &&
                  buyCart[shopid][val.id] &&
                  buyCart[shopid][val.id].sum == 0
                    ? ''
                    : buyCart[shopid] &&
                      buyCart[shopid][val.id] &&
                      buyCart[shopid][val.id].sum
                "
                :max="99"
              ></van-badge
              >{{ val && val.name }}
            </p>
          </li>
        </ul>
      </div>
      <!-- 右边商品 -->
      <div class="right">
        <div class="top">
          <em>
            <span class="top_left">{{
              footList[index] && footList[index].name
            }}</span>
            <span class="top_center">{{
              footList[index] && footList[index].description
            }}</span>
          </em>

          <span class="top_right">...</span>
        </div>
        <div class="bottom">
          <goodsparticulars
            :arr="footList[index] && footList[index].foods"
            @specification="specificationFn"
            @addgoods="addsumFn"
            @delgoods="delsumFn"
            :indexgg="indexgg"
            :index="index"
            ref="goodsparticulars"
          ></goodsparticulars>
        </div>
      </div>
      <!-- 底部 -->
      <div class="buy_car">
        <div class="login">
          <van-badge
            :content="
              buyCart[shopid] && buyCart[shopid].shopingsum == 0
                ? ''
                : buyCart[shopid] && buyCart[shopid].shopingsum
            "
            :max="99"
          >
          </van-badge>
          <i></i>
          <span
            @click="cartshow = true"
            class="iconfont icon-gouwuche-tianchong"
          ></span>
        </div>
        <div class="content">
          <div class="content_left">
            <span>￥{{ sum }}</span>
            <i>{{ tips }}</i>
          </div>
          <div class="content_right" @click="closeFn">
            <span>去结算</span>
          </div>
        </div>
      </div>
      <!-- 点击购物车车子弹出-->
      <van-popup
        v-model="cartshow"
        position="bottom"
        :closeable="true"
        :overlay="false"
      >
        <p><span>购物车</span> <em @click="empty">清空</em></p>
        <ul>
          <li v-for="(val, i) in cartshping" :key="i">
            <div class="name">
              <span>{{ val.name }}</span>
              <em class="guig">{{
                val.specs && val.specs.length == 0
                  ? ""
                  : val.specs && val.specs[0].value
              }}</em>
            </div>
            <div class="jia">
              <span class="qian">¥{{ val.price }}</span>
              <em class="iconfont icon-jjian-" @click="cartdel(val)"></em>
              <span> {{ val.num }} </span>
              <em class="iconfont icon-jia" @click="cartadd(val)"></em>
            </div>
          </li>
        </ul>
      </van-popup>
    </div>
  </div>
</template>

<script>
import goodsparticulars from "../components/goodsparticulars.vue";
import { footList } from "../api/goodShoping";
export default {
  data() {
    return {
      buyCart: JSON.parse(localStorage.getItem("buyCart")) || {},
      shopid: this.$route.query.shopid,
      footList: [],
      index: 0, //记录商品列表索引
      i: 0, //商品索引
      indexgg: 0, //商品规格索引
      show: false, //选择规则弹出框
      cartshow: false, //点击购物车弹出
      boolgg: false, //为了让子组件监测到父的事件
      cartshping: [], //购物车里的所有商品
      tips: this.$route.query.tips || localStorage.getItem("tips"),
    };
  },
  components: {
    goodsparticulars,
  },
  watch: {
    buyCart: {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler(newVal, oldVal) {
        localStorage.setItem("buyCart", JSON.stringify(this.buyCart));
      },
    },
    tips: {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler(newVal, oldVal) {
        localStorage.setItem("tips", JSON.stringify(this.tips));
      },
    },
  },
  computed: {
    // 商铺已选择商品总价
    sum() {
      return this.cartshping.reduce(function (sum, item) {
        return sum + item.price * item.num;
      }, 0);
    },
  },
  created() {
    footList({ restaurant_id: this.shopid }).then((res) => {
      console.log(36, res);
      this.footList = res.data;
    });
    this.init();
  },
  methods: {
    // 去结算
    closeFn() {
      this.$router.push({
        path: "/close",
        query: {
          cartshping: this.cartshping,
          shopid: this.shopid,
        },
      });
    },
    specificationFn(i) {
      console.log(65, i);
      this.i = i;
      this.show = true;
    },
    init() {
      for (const key1 in this.buyCart[this.shopid]) {
        if (!isNaN(Number(key1))) {
          for (const key2 in this.buyCart[this.shopid][key1]) {
            if (!isNaN(Number(key2))) {
              for (const key3 in this.buyCart[this.shopid][key1][key2]) {
                if (!isNaN(Number(key3))) {
                  if (this.buyCart[this.shopid][key1][key2][key3].num > 0) {
                    this.cartshping.push(
                      this.buyCart[this.shopid][key1][key2][key3]
                    );
                  }
                }
              }
            }
          }
        }
      }
    },
    addgoods() {
      this.$refs.goodsparticulars.addgoods(this.i, this.indexgg);
      this.show = false;
    },
    addsumFn(buyCart) {
      this.buyCart = buyCart;
      this.indexgg = 0;
      this.cartshping = [];
      this.init();
    },
    delsumFn(buyCart) {
      this.buyCart = buyCart;
      this.indexgg = 0;
      this.cartshping = [];
      this.init();
    },
    // 点击清空的事件
    empty() {
      this.buyCart[this.shopid] = {};
      this.cartshping = [];
      this.init();
      this.$refs.goodsparticulars.empty(this.shopid);
      this.cartshow = false;
      this.$toast("成功清空购物车");
    },
    // 购物车里的加
    cartadd(val) {
      this.buyCart[this.shopid].shopingsum += 1;
      this.buyCart[this.shopid][val.category_id].sum += 1;
      this.buyCart[this.shopid][val.category_id][val.item_id].nums += 1;
      this.buyCart[this.shopid][val.category_id][val.item_id][
        val.food_id
      ].num += 1;
      this.cartshping = [];
      this.init();
    },
    // 购物车里的减
    cartdel(val) {
      this.buyCart[this.shopid].shopingsum -= 1;
      this.buyCart[this.shopid][val.category_id].sum -= 1;
      this.buyCart[this.shopid][val.category_id][val.item_id].nums -= 1;
      this.buyCart[this.shopid][val.category_id][val.item_id][
        val.food_id
      ].num -= 1;
      this.cartshping = [];
      this.init();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-popup--bottom {
  margin-bottom: 50px;
  p {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    margin-top: 50px;
    padding: 0 20px;
    background-color: #eee;
  }
  li {
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    .name {
      display: flex;
      flex-direction: column;
      height: 40px;
      line-height: 20px;
      padding-top: 10px;
      span {
        font-size: 20px;
        font-weight: 600;
      }
      .guig {
        font-size: 12px;
      }
    }
    .qian {
      margin-right: 30px;
      color: red;
    }
    .jia {
      .iconfont {
        color: #3190e8;
        font-size: 16px;
      }
    }
  }
}
.box {
  display: flex;
  width: 100%;
  font-size: 16px;
  color: #666;
  margin-top: 2px;
  padding-bottom: 50px;
  .left {
    width: 24%;
    li {
      position: relative;
      background-color: #fff;
      width: 90px;
      height: 65px;
      line-height: 65px;
      text-align: center;
      p {
        overflow: hidden;
      }
    }
  }
  .right {
    width: 76%;
    .top {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      .top_center {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.blue {
  border-left: 4px solid #3190e8;
  background-color: #fff;
}
.specification {
  width: 250px;
  height: 200px;
  background-color: #fff;
  padding-left: 10px;
  h4 {
    text-align: center;
    font-size: 20px;
    height: 40px;
    line-height: 40px;
  }
  p {
    margin: 14px 0;
    font-size: 14px;
  }
  /deep/.van-button {
    border-radius: 8px;
    height: 35px;
    padding: 0 10px;
    margin: 0 8px;
  }
  h2 {
    padding-right: 8px;
    display: flex;
    justify-content: space-between;
    height: 35px;
    line-height: 35px;
    margin-top: 35px;
  }
}

/deep/.van-popup--center {
  border: 1px solid #fff;
  border-radius: 6px;
}
/deep/.van-badge {
  position: absolute;
  top: 0;
  right: 0;
}
.buy_car {
  position: fixed;
  background-color: #3d3d3f;
  bottom: 0;
  left: 0;
  z-index: 13;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 48px;
  .login {
    width: 20%;
    height: 100%;
    position: relative;
    .van-badge {
      position: absolute;
      top: -20px;
      right: 15px;
      z-index: 200;
    }
    i {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      left: 15px;
      bottom: 15px;
      background-color: #3d3d3f;
    }
    span {
      position: absolute;
      width: 32px;
      height: 32px;
      left: 25px;
      bottom: 30px;
      font-size: 27px;
      color: #fff;
      border-radius: 50%;
      background-color: #3190e8;
    }
  }
  .content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .content_left {
      display: flex;
      flex-direction: column;
      color: #fff;
      span {
        margin-bottom: 8px;
      }
      i {
        font-size: 12px;
      }
    }
    .content_right {
      background-color: #4cd964;
      height: 48px;
      width: 40%;
      line-height: 48px;
      text-align: center;
      span {
        color: #ffffff;
        font-weight: 700;
      }
    }
  }
}
</style>